/*
* PureComponent 是用于做性能提示，可以监视state的变化情况，如果更改了才进行更新；否则页面不更新 render
* 当我们的组件继承 PureComponent 后，则开发者不需要自己使用 shouldComponentUpdate 生命周期函数进行判断。
*
* Pure单词有纯净的意思
*
*
* */
import {PureComponent} from 'react';

import './news.css';
import {getNews, collectNews} from "../../api/news";

class News extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            title: 'hi react!',
            newsList: [],
            page: 1,
            size: 2,
            total: 0,

        }
    }

    componentDidMount() {

        this.getNewsList();


    }

    getNewsList = async (page = 1) => {
        let info = await getNews(page); // promise对象
        console.log(info.data, '每页的数据信息');
        let {statusCode} = info.data;
        if (statusCode == 200) {
            let newsList = info.data.data.list;
            let total = info.data.data.total;

            console.log(newsList);

            this.setState({
                newsList: [...this.state.newsList, ...newsList],
                total,
            })

        } else {
            alert('系统繁忙，接口请求失败！');
        }
    }

    loadMore = () => {
        /* 每点击一下，就相当于做了一个翻页操作，代表获取下一页的数据 */
        this.setState({
            page: this.state.page + 1,
        }, () => {
            if (this.state.newsList.length >= this.state.total) {
                console.log('数据已经没有了', this.state.page);
                alert('暂无更多的数据信息');

                return;
            }
            this.getNewsList(this.state.page);

        })

    }

    /*
    * 1. 收藏接口
    * 2. 用户必须登录后，才可以收藏，不然不知道是谁收藏的
    * 3. collectNews 方法要知道收藏是哪条新闻
    * */
    collectNews = async (newsId) => {
        // 判断一下是否登录
        let token = localStorage.getItem('userToken');
        if (!token) {
            alert('请登录后收藏！');
            return false;
        }
        let info = await collectNews(newsId);
        if (info.data.statusCode == 200) {
            alert('收藏成功！');
        } else if (info.data.statusCode == 400) {
            alert('该新闻已被收藏过，无需在收藏');

        } else {
            alert('系统繁忙！');
            return false;
        }


        console.log('collectNews', info);

    }

    goDetail = (item) => {
        console.log(item);
        /* 编程式导航：指的是通过编程的方式进行页面的跳转*/
        /* 方式一：参数列表是通过 动态路由实现的。*/
        /* 方式二：参数列表是通过 查询字符串实现 query。 http://a.com?id=1&type=12*/
        this.props.history.push('/news/' + item._id);

    }

    goDetail1 = (item) => {
        console.log(item);
        /* 方式二：参数列表是通过 查询字符串实现 query。 http://a.com?id=1&type=12*/

        // this.props.history.push('/detail?id=' +item._id);

        // 使用对象的方式进行query的传递参数
        this.props.history.push({pathname: '/detail', query: {id: item._id}});

    }


    render() {
        /*凡是通过 Route 渲染出来的组件， props 上面会多出一些属性，这些属性是 react-router-dom 库为其增加的。*/
        console.log(this.props, 'detail');

        return (
            <div>
                <h1>新闻列表</h1>
                {
                    this.state.newsList.map(item => {
                        return (
                            <ul key={item._id}>
                                <li>序号：{item._id}</li>
                                <li>
                                    <button onClick={() => {
                                        this.goDetail(item)
                                    }}>查看详情方式1-动态参数
                                    </button>

                                    <button onClick={() => {
                                        this.goDetail1(item)
                                    }}>查看详情方式2-query
                                    </button>


                                </li>
                                <li>
                                    <button onClick={() => {
                                        this.collectNews(item._id)
                                    }}>点击收藏
                                    </button>
                                </li>
                                <li>标题名称：{item.title}</li>
                                <li>浏览次数：{item.viewCount}</li>
                                <li>作者：{item.author}</li>
                                <li>封面图：<img width={100} src={'https://yw.52kfw.cn' + item.imageUrl} alt=""/></li>
                            </ul>
                        )
                    })
                }
                <hr/>
                <button onClick={this.loadMore}>点击加载更多....</button>
            </div>
        );
    }

}

export default News;
